<template>
  <div>
    <el-dialog
      top="30px"
      width="1000px"
      custom-class="pre-dialog"
      title="新增计划"
      :visible.sync="visible"
      @close="handleClose"
    >
      <el-form :model="form" class="add-form">
        <el-row type="flex" :gutter="30">
          <el-col :span="17">
            <div class="left">
              <div class="title">基本信息</div>
              <el-row type="flex" :gutter="30">
                <el-col :span="8">
                  <el-form-item label="订单编号" prop="ddbh">
                    <el-input
                      type="text"
                      size="small"
                      placeholder="请输入"
                      v-model="form.ddbh"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="订单类型" prop="ddlx">
                    <el-select
                      size="small"
                      placeholder="请输入"
                      v-model="form.ddlx"
                    >
                      <el-option
                        v-for="item in orderOption"
                        :key="item.id"
                        :label="item['key_value']"
                        :value="item['key_value']"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="计划开台" prop="jhkt">
                    <el-input
                      v-model="form.jhkt"
                      type="text"
                      size="small"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="计划产量(T/日)" prop="jhcl">
                    <el-input
                      v-model="form.jhcl"
                      type="text"
                      size="small"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="订单量(吨)" prop="zl">
                    <el-select
                      v-model="form.zl"
                      size="small"
                      placeholder="请输入"
                      allow-create
                      filterable
                    >
                      <el-option label="20" :value="20" />
                      <el-option label="40" :value="40" />
                      <el-option label="50" :value="50" />
                      <el-option label="60" :value="60" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="支别" prop="zb">
                    <el-select
                      v-model="form.zb"
                      size="small"
                      placeholder="请输入"
                    >
                      <el-option
                        v-for="item in branchOption"
                        :key="item.id"
                        :label="item['key_value']"
                        :value="item['key_value']"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="计划停台" prop="jhtt">
                    <el-input
                      v-model="form.jhtt"
                      type="text"
                      size="small"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="理论产量(T/日)" prop="llcl">
                    <el-input
                      v-model="form.llcl"
                      type="text"
                      size="small"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="品种" prop="pz">
                    <el-select
                      v-model="form.pz"
                      size="small"
                      placeholder="请输入"
                    >
                      <el-option
                        v-for="item in pzOption"
                        :key="item.id"
                        :label="item['key_value']"
                        :value="item['key_value']"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="订单交期" prop="ddjq">
                    <el-date-picker
                      v-model="form.ddjq"
                      type="date"
                      size="small"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="计划台产量(KG/日)" prop="jhtc">
                    <el-input
                      v-model="form.jhtc"
                      type="text"
                      size="small"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 订单排班计划 -->
              <div class="title" style="margin:10px 0">订单排单方式</div>
              <el-radio-group
                class="arrangement"
                v-model="arrangeRadio"
                size="mini"
              >
                <el-radio label="1" border>按平均规则排单</el-radio>
                <el-radio label="2" border>自定义日期排单</el-radio>
              </el-radio-group>
              <el-row type="flex" :gutter="30">
                <el-col :span="8">
                  <el-form-item label="订单开始时间" prop="start_time">
                    <el-date-picker
                      v-model="form.start_time"
                      type="date"
                      size="small"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计完成时间" prop="end_time">
                    <el-date-picker
                      v-model="form.end_time"
                      type="date"
                      size="small"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col
                  :span="8"
                  style="padding-top:35px"
                  v-if="arrangeRadio == '1'"
                >
                  <i class="el-icon-info"></i>
                  <span style="margin-left:5px;color:#FF781B;font-size:12px"
                    >已选日期：平均每天生产2.1吨</span
                  >
                </el-col>
              </el-row>
              <div v-if="arrangeRadio == '2'">
                <el-row type="flex" :gutter="30">
                  <el-col :span="8">
                    <el-row type="flex" :gutter="5">
                      <el-col :span="14">
                        <el-form-item label="订单日期">
                          <el-date-picker
                            type="date"
                            size="small"
                            placeholder="选择日期"
                            disabled
                          >
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span="10">
                        <el-form-item label="计划产量(吨)">
                          <el-input
                            type="text"
                            size="small"
                            placeholder="请输入"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
              <pz-table />
            </div>
          </el-col>
          <el-col :span="7">
            <div class="right">
              <div class="title">订单计划车间</div>
              <el-checkbox-group
                class="checkbox"
                v-model="planCj"
                size="medium"
              >
                <el-checkbox
                  v-for="(item, index) in cjOption"
                  :key="index"
                  :label="item['key_value']"
                />
              </el-checkbox-group>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="btn-list" style="justify-contetn:flex-end">
        <el-button>取消</el-button>
        <el-button type="primary" @click="addPlan">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addPrePlan } from '@/api/productionPlan';
import pzTable from './pzTable.vue';
export default {
  components: {
    pzTable
  },
  data() {
    return {
      visible: false,
      planCj: [],
      form: {},
      arrangeRadio: '1'
    };
  },
  computed: {
    orderOption() {
      return this.$store.getters.orderTypeOption;
    },
    pzOption() {
      return this.$store.getters.pzOption;
    },
    cjOption() {
      return this.$store.getters.cjOption;
    },
    branchOption() {
      return this.$store.getters.branchOption;
    }
  },
  methods: {
    edit() {
      this.visible = true;
    },
    async addPlan() {
      const res = await addPrePlan(this.form);
      if (res.code == 1) {
        this.$message.success('添加计划成功');
        this.handleClose();
      }
    },
    handleClose() {
      this.form = {};
      this.visible = false;
      this.$emit('close');
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 12px;
  font-weight: 600;
  color: #182236;
}
.right {
  height: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  background: #f6f6f6;
  text-align: left;
}
.checkbox {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  ::v-deep .el-checkbox__label {
    font-size: 14px;
    color: #4a576c;
  }
  .el-checkbox {
    margin-bottom: 15px;
  }
}
::v-deep.arrangement {
  margin-bottom: 10px;
  .el-radio {
    padding: 6px 20px 0 20px;
    margin: 0 15px 0 0 !important;
  }
  .el-radio.is-bordered.is-checked {
    border-color: #2c67f6;
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      width: 22px;
      height: 20px;
      background: url('~@/assets/img/checked.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #2c67f6;
  }
  .el-radio__label {
    padding: 0;
  }
  .el-radio__input {
    display: none;
  }
}
.pre-dialog.el-dialog .el-dialog__body .add-form .el-form-item {
  margin-bottom: 6px;
}
::v-deep.el-date-editor.el-input,
::v-deep.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
